<template>
    <div class="chickenBlock">
        <div>
            <img :src="chicken" alt="" draggable="false">
        </div>
        <div class="txt">鸡动模式正在开启</div>
    </div>
</template>

<script lang='ts' setup>
import chicken from '@/assets/chicken.gif'
import { onMounted } from 'vue';

const $emit = defineEmits(['close'])
onMounted(()=>{
    let t = setTimeout(()=>{
        clearTimeout(t)
        $emit('close')
    },1500)
})
</script>

<style lang='less' scoped>
    .chickenBlock{
        width: 260px;
        height: 190px;
        background-color: rgb(26,26,26);
        border-radius: 0.5em;
        position:fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: auto auto;
        user-select: none;
        img{
            width: 140px;
            height: 120px;
            margin-top: 10px;
            border-radius: 0.5em;
        }
        >div{
            width: 140px;
        }
        .txt{
            color: white;
            font-size: 18px;
            width: 100%;
            text-align: center;
            margin-top: 20px;
        }
    }
</style>